<template>
  <div v-loading="pageLoading" class="trends-details main-wrapper">
    <div class="title">{{ detailsData.name }}</div>
    <div class="opera">
      <!-- <span class="type-title">理论{{ route.query.type == 'publicize' ? '宣传' : '学习' }}</span> -->
      <!-- <span class="line"></span> -->
      <span style="margin-right: 20px;">{{ format(detailsData.pubDate) }}</span>
      <!-- 浏览 <span class="num">321</span> -->
      <!-- <div style="margin-left: auto;margin-right: 14px;">
        <el-icon>
          <Share />
        </el-icon>
        分享
      </div>
      <div>
        <el-icon>
          <StarFilled />
        </el-icon>
        收藏
      </div> -->
    </div>
    <div class="content" v-html="detailsData.content"></div>
    <div class="image-content">
      <el-image style="width: 100%;height: 100%;" :src="getImageUrl(detailsData.newsPicture)" fit="cover">
        <template #error>
          <img src="/images/course_default.png" style="width: 100%; height: 100%;">
        </template>
      </el-image>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SocialscienceDetails'
}
</script>
<script setup>
import { useSystemStore } from '@/stores/modules/system.js';
import { useRoute } from 'vue-router';
import { http } from '@/utils/http/index.js'
import { getImageUrl } from '@/utils/index.js'
import { format } from '@/plugins/moment.js'
import { ref } from 'vue';
// import { Share, StarFilled } from '@element-plus/icons-vue'

const route = useRoute()

const systemStore = useSystemStore()
/**设置头部 */
systemStore.headerType = 'logo_default'
systemStore.headerBgcolor = 'theme-color'
systemStore.headerFontColor = '1'

const detailsData = ref({})
const GetSocialScienceNewsDetailById = () => {
  http.$GET('/SocialScienceM/GetSocialScienceNewsDetailById', { id: route.query.id }).then(res => {
    if (res.isError) return
    detailsData.value = res.result
  }).finally(() => pageLoading.value = false)
}

/**
 * publicize: 理论宣传
 * theory: 理论学习
 */
const pageLoading = ref(true)
GetSocialScienceNewsDetailById()
// if (route.query.type == 'theory') getTheoryNewsDetail()

</script>
<style lang='scss' scoped>
.trends-details {
  min-height: 100vh;
  padding: 68px 0;

  .title {
    font-size: 33px;
    font-weight: 600;
    color: #393939;
    margin-bottom: 22px;
  }

  .opera {
    font-size: 22px;
    font-weight: 400;
    color: #A7A7A7;
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #E7E7E7;

    .type-title {
      color: var(--theme-color);
    }

    .line {
      display: inline-block;
      border-left: 2px solid #A7A7A7;
      height: 22px;
      margin: 0 20px;
    }

    .num {
      color: #484848;
      margin-left: 6px;
    }

    >div {
      display: flex;
      align-items: center;
      cursor: pointer;

      .el-icon {
        margin-right: 5px;
        font-size: 22px;
      }
    }
  }

  .content {
    margin: 60px 0 39px;
    //color: #999899;
    //font-size: 18px;
    //line-height: 26px;
    //letter-spacing: 1px;
  }

  .image-content {
    width: 100%;
    padding-bottom: 57px;
    border-bottom: 1px solid #E7E7E7;
  }
}
</style>